<!-- emeet产品数据列表 -->
<template>
    <div class="container">
        <a-row class="condition-pannel white-pannel">
            可能需要的条件筛选

        </a-row>
        <!-- 参数查询区域：表格数据显示方式，数据导出等 -->
        <a-row class="condition-pannel white-pannel">
            <a-col :span="5">
                当前年：
                <a-select
                    show-search
                    placeholder="Select a person"
                    option-filter-prop="children"
                    style="width: 200px"
                  
                    :value="curYear"
                    @focus="handleFocusWeek"
                    @blur="handleBlurWeek"
                    @change="handleChangeWeek"
                >
                    <a-select-option :value="v" v-for="v,k in yearOptions" :key="k">
                        {{v}}
                    </a-select-option>
                </a-select>
            </a-col>
            <a-col :span="5">
                当前周（年）：
                <a-select
                    show-search
                    placeholder="Select a person"
                    option-filter-prop="children"
                    style="width: 200px"
                
                    :value="curWeek"
                    @focus="handleFocusWeek"
                    @blur="handleBlurWeek"
                    @change="handleChangeWeek"
                >
                   <a-select-option :value="v" v-for="v,k in weekOptions" :key="k">
                        {{v}}
                    </a-select-option>
                </a-select>
            </a-col>
            <a-col :span="5">
                对比年：
                <a-select
                    show-search
                    placeholder="Select a person"
                    option-filter-prop="children"
                    style="width: 200px"
                   
                    :value="targetYear"
                    @focus="handleFocusTargetYear"
                    @blur="handleBlurTargetYear"
                    @change="handleChangeTargetYear"
                >
                    <a-select-option :value="v" v-for="v,k in yearOptions" :key="k">
                        {{v}}
                    </a-select-option>
                </a-select>
            </a-col>
            <a-col :span="5">
                对比周（年中周）：
                <a-select
                    show-search
                    placeholder="Select a person"
                    option-filter-prop="children"
                    style="width: 200px"
                    
                    :value="targetWeek"
                    @focus="handleFocusTargetWeek"
                    @blur="handleBlurTargetWeek"
                    @change="handleChangeTargetWeek"
                >
                   <a-select-option :value="v" v-for="v,k in weekOptions" :key="k">
                        {{v}}
                    </a-select-option>
                </a-select>
            </a-col>
            <a-col :span="4">
                <a-button type="primary" @click="exportReview">
                    评分评论数据导出
                </a-button>
            </a-col>
            
            
        </a-row>
        <!-- 内容显示区域（表格） -->
        <a-table :columns="columns" :data-source="data" class="white-pannel table-content" :pagination="pagination" rowKey="index" :scroll="{ x: 1500 }">
           
            <!-- 值 -->
            <span slot="name"><a-icon type="smile-o" />机型</span>
            <span slot="source"><a-icon type="smile-o" />来源</span>
            <span slot="updateTime"><a-icon type="smile-o" />时间</span>
            <span slot="week"><a-icon type="smile-o" />当前周（年）</span>
            <!-- <span slot="currentStar"><a-icon type="smile-o" />当前星级</span> -->
            <span slot="fiveData"><a-icon type="smile-o" />5星review数</span>
            <span slot="targetFiveData"><a-icon type="smile-o" />5星review数（对比周）</span>
            <span slot="fourData"><a-icon type="smile-o" />4星review数</span>
            <span slot="targetFourData"><a-icon type="smile-o" />4星review数（对比周）</span>
            <span slot="threeData"><a-icon type="smile-o" />3星review数</span>
            <span slot="targetThreeData"><a-icon type="smile-o" />3星review数（对比周）</span>
            <span slot="twoData"><a-icon type="smile-o" />2星review数</span>
            <span slot="targetTwoData"><a-icon type="smile-o" />2星review数（对比周）</span>
            <span slot="oneData"><a-icon type="smile-o" />1星review数</span>
            <span slot="targetOneData"><a-icon type="smile-o" />1星review数（对比周）</span>
            <span slot="action"><a-icon type="smile-o" />操作</span>

        <!-- 自定义渲染插槽 -->
            <!-- 自定义文本渲染 -->
            <span slot="customRenderText" slot-scope="text">
                {{text}}
            </span>

            <!-- 自定义文本渲染1 -->
            <span slot="customRenderText2" slot-scope="text" style="backgournd-color:red">
                {{text}}
            </span>
            <!-- 自定义对象文本渲染 -->
            <span slot="customRenderObjText" slot-scope="obj" style="color:green">
                <span v-if="obj != undefined">{{obj.reviewNum}}</span>
            </span>
            <!-- 自定义对象文本渲染2 -->
            <span slot="customRenderObjText2" slot-scope="obj" style="color:red">
                <span v-if="obj != undefined">{{obj.reviewNum}}</span>
            </span>
            <!-- 自定义渲染时间 -->
            <span slot="customRenderTime" slot-scope="obj">
                {{formatTime(obj)}}
                <!-- {{this.$moment(obj).format("YYYY-MM-DD hh:mm:ss")}} -->
            </span>
            <!-- 自定义标签渲染 -->
            <span slot="customRenderTag" slot-scope="text">
                <a-tag color="orange">
                    {{text}}
                </a-tag>
            </span>
            <!-- 操作 -->
            <span slot="action" slot-scope="reviewLink">
                 <a :href="reviewLink" target="_blank">查看原始评分页面</a>
            </span>
        </a-table>
    </div>
</template>
<script>
// import VolumeGraph from "@/components/echart/volume-graph.vue";
const columns = [
    
    // 机型
    {
        dataIndex: 'name',
        slots: {title: 'name'},
        scopedSlots: {customRender: 'customRenderTag'},
        width: "120px"
    },
    // 来源
    {
        dataIndex: 'source',
        slots: {title: 'source'},
        scopedSlots: {customRender: 'customRenderTag'},
        width: "120px"
    },
    // 时间
    {
        dataIndex: 'updateTime',
        slots: {title: 'updateTime'},
        scopedSlots: {customRender: 'customRenderTime'},
        width: "200px"
    },
    {
        dataIndex: "week",
        slots: {title: "week"},
        scopedSlots: {customRender: 'customRenderText'},
        width: "80px",
    },
    // // 当前星级
    // {
    //     dataIndex: 'currentStar',
    //     slots: { title: 'currentStar' },
    //     scopedSlots: { customRender: 'customRenderTag' },
    //     width: "50px"
    // },
    // 本周：5-1星review数(重复，后面改善)
    {
        dataIndex: 'fiveData',
        slots: {title: 'fiveData'},
        scopedSlots: {customRender: 'customRenderObjText'},
        width: "120px",
        align: "center",
    },
    {
        dataIndex: 'targetFiveData',
        slots: {title: 'targetFiveData'},
        scopedSlots: {customRender: 'customRenderObjText2'},
        width: "120px",
        align: "center",
    },
    {
        dataIndex: 'fourData',
        slots: {title: 'fourData'},
        scopedSlots: {customRender: 'customRenderObjText'},
        width: "120px",
        align: "center",
    },
    {
        dataIndex: 'targetFourData',
        slots: {title: 'targetFourData'},
        scopedSlots: {customRender: 'customRenderObjText2'},
        width: "120px",
        align: "center",
    },
    {
        dataIndex: 'threeData',
        slots: {title: 'threeData'},
        scopedSlots: {customRender: 'customRenderObjText'},
        width: "120px",
        align: "center",
    },
    {
        dataIndex: 'targetThreeData',
        slots: {title: 'targetThreeData'},
        scopedSlots: {customRender: 'customRenderObjText2'},
        width: "120px",
        align: "center",
    },
    {
        dataIndex: 'twoData',
        slots: {title: 'twoData'},
        scopedSlots: {customRender: 'customRenderObjText'},
        width: "120px",
        align: "center",
    },
    {
        dataIndex: 'targetTwoData',
        slots: {title: 'targetTwoData'},
        scopedSlots: {customRender: 'customRenderObjText2'},
        width: "120px",
        align: "center",
    },
    {
        dataIndex: 'oneData',
        slots: {title: 'oneData'},
        scopedSlots: {customRender: 'customRenderObjText'},
        width: "120px",
        align: "center",
    },    
    {
        dataIndex: 'targetOneData',
        slots: {title: 'targetOneData'},
        scopedSlots: {customRender: 'customRenderObjText2'},
        width: "120px",
        align: "center",
    },
     // 操作
    {
        dataIndex: 'reviewLink',
        title: '操作',
        scopedSlots: { customRender: 'action' },
        width: "80px"
    },
];


import {getReviewRatingCompareList} from "@/api/reviews/item_reviews"
import {getYear, getWeek} from "@/utils/time_utils"
import {get} from "@/utils/http"

export default {
    components: {  },
    data() {
        return {
            data:[],              
            columns,
            pagination: {
                position: "bottom"
            },
            weekOptions: [15, 16],
            yearOptions: [2022],

            curWeek: 16,    // 当前周
            curYear: 2022,  // 当前年
            targetWeek: 15, // 对比周
            targetYear: 2022, // 对比年
        };
    },
    methods: {
        callback(key) {
            console.log(key);
        },
       
        exportReview(){
            var param = {
                'week': this.curWeek,
                'year': this.curYear,
                'targetWeek': this.targetWeek,
                'targetYear': this.targetYear
            }
            var url = "/api/export-compare-review-data"
            const form = document.createElement('form');
            form.style.display = 'none';
            // form.setAttribute('target', '_blank');
            form.setAttribute('method', "get");
            form.setAttribute('action', url);
         
            // input.setAttribute('type','hidden');
            // 对于get请求 最终会拼成http://192.168.66.183:13666/download?name=HAP.pdf
            // input.setAttribute('name', paramsKey);
            // input.setAttribute('value', paramsValue);
            for(var k in param){
                var input = document.createElement('input');
                input.setAttribute('name', k)
                input.setAttribute('value', param[k])
                form.appendChild(input);
            }
            document.body.appendChild(form);
            form.submit();
            document.body.removeChild(form);
        },

        /**
         * warning: 4个按钮分别写了4遍的事件触发函数，该改善
         */
        handleFocusWeek(){

        },
        handleBlurWeek(){
            
        },
        handleChangeWeek(value){
            this.curWeek = value
            
        },
        handleFocusYear(){

        },
        handleBlurYear(){
            
        },
        handleChangeYear(value){
            this.curYear = value
            
        },
        handleFocusTargetWeek(){

        },
        handleBlurTargetWeek(){
            
        },
        handleChangeTargetWeek(value){
            this.targetWeek = value
            
        },
        handleFocusTargetYear(){

        },
        handleBlurTargetYear(){
            
        },
        handleChangeTargetYear(value){
            this.targetYear = value
            
        },
        formatTime(obj){
            return this.$moment.utc(obj).format("YYYY-MM-DD HH:mm:ss")
        },
        // 更新数据
        updateData(){
            var param = {
                'week': this.curWeek,
                'year': this.curYear,
                'targetWeek': this.targetWeek,
                'targetYear': this.targetYear
            }
            getReviewRatingCompareList(param).then(
                (data) =>{
                    this.data = data.data
                }
            ).catch (
                err=>{
                    console.log("request error: ", err)
                }
            )
        }
    },
    created(){
        // getReviewRatingList().then(
        //     (data)=>{
        //         console.log(data)
        //         this.data = data.data
        //     },
        //     (err) =>{
        //         console.log("request error", err)
        //     }
        // );
        var now = new Date();
        this.curWeek = getWeek(now);
        this.curYear = getYear(now);
        this.targetWeek = this.curWeek - 1;
        this.targetYear = this.curYear;
        // 组件加载时的默认参数
        this.updateData()
    },
    watch:{
        curWeek(){
            this.updateData()
        },
        curYear(){
            this.updateData()
        },
        targetWeek(){
            this.updateData()
        },
        targetYear(){
            this.updateData()
        }
    }
}
</script>
<style lang="less" scoped>
.container{
    margin: 30px 50px;
}

.card-panel{
    height: 200px;
    width: 100%;
    margin-bottom: 20px;
    padding: 0;
}

.white-pannel{
    background-color: white;
}

.condition-pannel{
    height: 50px;
    text-align: center;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    background-color: antiquewhite;
}

.grid-image{
    width: 50px;
    height: 40px;
}

.tabel-content{
    margin-bottom: 50px;
    text-align: center;
}

.tab-panel{
    padding: 0 !important;
    margin: 0 !important;
}

.graph_cell{
    width: 200px;
    height: 80px;
}

.product-info{
    width: 150px;
}

.text-line{
    overflow: hidden;
    font-size: 10px;
}
</style>